<template>
  <div class="Integrated_Monitoring_ETLGJ">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px':'top: 100px;padding:10px'"
        >
          <el-tabs type="border-card">
            <el-tab-pane label="SQL作业列表">
              <el-row style="margin-top:10px">
                <el-col :span="20">
                  <span style="margin-left:0px">数据库IP地址：</span>
                  <el-input
                    size="mini"
                    style="display:inline-block;width:160px"
                  ></el-input>
                  <span style="margin-left:15px">数据库实例名：</span>
                  <el-input
                    size="mini"
                    style="display:inline-block;width:160px"
                  ></el-input>
                  <span style="margin-left:15px">作业名：</span>
                  <el-input
                    size="mini"
                    style="display:inline-block;width:160px"
                  ></el-input>
                  <span style="margin-left:15px">状态：</span>
                  <el-input
                    size="mini"
                    style="display:inline-block;width:100px"
                  ></el-input>

                  <span style="margin-left:15px">调用时间：</span>
                  <el-date-picker
                    v-model="value1"
                    size="small"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-col>
                <el-col :span="4">
                  <el-button
                    size="small"
                    style="float:right;margin-right:50px"
                  >重置</el-button>
                  <el-button
                    size="small"
                    style="float:right;margin-right:10px"
                  >查询</el-button>
                </el-col>
              </el-row>
              <el-table
                :data="tableData"
                style="width: 100%;margin-top:15px"
                height="600"
                border
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                >
                </el-table-column>
                <el-table-column
                  prop="date2"
                  label="最后执行状态"
                >
                </el-table-column>
                <el-table-column
                  prop="date3"
                  label="作业名"
                >
                </el-table-column>
                <el-table-column
                  prop="date4"
                  label="数据库IP地址"
                >
                </el-table-column>
                <el-table-column
                  prop="date5"
                  label="数据库实例名"
                >
                </el-table-column>
                <el-table-column
                  prop="date6"
                  label="数据库类型"
                >
                </el-table-column>
                <el-table-column
                  prop="date7"
                  label="作业步骤总数"
                >
                </el-table-column>
                <el-table-column label="最后执行时间">
                </el-table-column>

              </el-table>
            </el-tab-pane>
            <el-tab-pane label="SQL作业日志">
              <el-row style="margin-top:10px">
                <el-col :span="20">
                  <span style="margin-left:0px">数据库IP地址：</span>
                  <el-input
                    size="mini"
                    style="display:inline-block;width:160px"
                  ></el-input>
                  <span style="margin-left:15px">数据库实例名：</span>
                  <el-input
                    size="mini"
                    style="display:inline-block;width:160px"
                  ></el-input>
                  <span style="margin-left:15px">作业名：</span>
                  <el-input
                    size="mini"
                    style="display:inline-block;width:160px"
                  ></el-input>
                  <span style="margin-left:15px">状态：</span>
                  <el-input
                    size="mini"
                    style="display:inline-block;width:100px"
                  ></el-input>

                  <span style="margin-left:15px">调用时间：</span>
                  <el-date-picker
                    size="small"
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-col>
                <el-col :span="4">
                  <el-button
                    size="small"
                    style="float:right;margin-right:50px"
                  >重置</el-button>
                  <el-button
                    size="small"
                    style="float:right;margin-right:10px"
                  >查询</el-button>
                </el-col>
              </el-row>
              <el-table
                :data="tableData"
                style="width: 100%;margin-top:15px"
                height="600"
                border
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                >
                </el-table-column>
                <el-table-column
                  prop="date2"
                  label="执行状态"
                >
                </el-table-column>
                <el-table-column
                  prop="date3"
                  label="作业名"
                >
                </el-table-column>
                <el-table-column
                  prop="date4"
                  label="数据库实例名"
                >
                </el-table-column>
                <el-table-column
                  prop="date5"
                  label="数据库IP地址"
                >
                </el-table-column>
                <el-table-column
                  prop="date6"
                  label="数据库类型"
                >
                </el-table-column>
                <el-table-column
                  prop="date7"
                  label="状态"
                >
                </el-table-column>
                <el-table-column label="作业步骤总数">
                </el-table-column>
                <el-table-column label="最后执行时间">
                </el-table-column>
                <el-table-column label="耗时">
                </el-table-column>
                <el-table-column label="运行状态信息">
                </el-table-column>
                <el-table-column label="异常处理">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      value1: '',
      tableData: [
      ]
    };
  },
  methods: {
  },
  mounted () {
    // document.getElementById("2").focus();
  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
  }
};
</script>
<style lang="scss">
.Integrated_Monitoring_ETLGJ {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
}
</style>
